<!-- 这里是评论的主体 -->
<template>
  <div>
    <div class="main">
      <div class="userInfo">
        <el-row type="flex" class="row-bg">
          <img
            :src="$axios.defaults.baseURL + dataList.account.defaultAvatar"
            alt
          />
          <div class="info">
            <p class="name">{{ dataList.account.nickname }}</p>
            <p class="date">
              {{ $moment(dataList.created_at).format("YYYY-MM-DD") }}
            </p>
          </div>
        </el-row>
      </div>
      <!-- 内容父组件 -->
      <Parent
        v-if="dataList.parent"
        :parentList="dataList.parent"
        @showAndfoucs="parentCallReply"
      />
      <div class="commentCon">
        <p>{{ dataList.content }}</p>
        <div class="imgs" v-if="dataList.pics.length > 0">
          <div class="img" v-for="(img, index) in dataList.pics" :key="index">
            <img :src="$axios.defaults.baseURL + img.url" alt />
          </div>
        </div>
      </div>
      <div
        class="reply"
        @click="
          showAndfoucs({ id: dataList.id, nickname: dataList.account.nickname })
        "
      >
        <span class="iconfont">&#xe73e;</span>回复
      </div>
    </div>

    <el-collapse-transition>
      <div class="writeComment" v-if="showInp">
        <textarea
          rows="10"
          v-model="content"
          :placeholder="placeholderText"
          @click="show = !show"
          @blur="hidden"
          ref="area"
        ></textarea>
        <el-collapse-transition>
          <div class="btn" v-show="show">
            <button class="ok" @click="puhlishComment">发布</button>
            <button class="cancel">取消</button>
          </div>
        </el-collapse-transition>
      </div>
    </el-collapse-transition>
    <!-- 登录对话框 -->
    <el-dialog
      :show-close="false"
      title="请先进行登录"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <!-- 内容填充 -->
      <div class="login" style="position:relative;">
        <LoginComponent @DialogClose="DialogClose" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Parent from "./parent";
import CommentFrame from "@/components/post/commentFrame";
import LoginComponent from "@/components/user/LoginComponent";
export default {
  props: ["dataList"],
  data() {
    return {
      dialogVisible: false,
      showInp: false,
      show: false,
      content: "",
      parentInfo: {}
    };
  },
  components: {
    Parent,
    CommentFrame,
    LoginComponent
  },
  computed: {
    placeholderText() {
      //点击回复的时候可以拿到nickname所以在textarea里面就能显示回复@
      if (this.parentInfo.nickname) {
        return "回复 @" + this.parentInfo.nickname;
      } else {
        return "写下你的评论...";
      }
    }
  },
  methods: {
    // 发布评论
    puhlishComment() {
      // 判断是否登陆
      if (!this.$store.state.user.userInfo.token) {
        return (this.dialogVisible = true);
      }

      if (!this.content.trim()) {
        this.$message({
          message: "请输入内容",
          type: "error"
        });
        return;
      }
      let id = Number(this.$route.query.id);
      let followId = this.parentInfo.id;
      let data = {
        post: id,
        content: this.content,
        follow: followId
      };
      this.$axios({
        url: "/comments",
        method: "post",
        data,
        headers: {
          Authorization: "Bearer " + this.$store.state.user.userInfo.token
        }
      }).then(res => {
        // console.log(res);
        if (res.data.message == "提交成功") {
          // 优化1. 提醒父页面更新评论数据
          this.$emit("reloadComment");
          this.$message({
            message: "发布成功",
            type: "success"
          });
          this.content = "";
          setTimeout(() => {
            this.show = false;
          }, 50);
        }
      });
    },
    // 显示评论框并聚焦
    showAndfoucs(userInfo) {
      console.log(userInfo);
      this.showInp = true;
      if (this.showInp) {
        this.$nextTick(x => {
          //正确写法
          this.$refs.area.focus();
        });
      }
      this.parentInfo = userInfo;
    },
    //接收递归组件传来的值并显示评论框并聚焦
    parentCallReply(userInfo) {
      console.log(userInfo);
      this.showInp = true;
      if (this.showInp) {
        this.$nextTick(x => {
          //正确写法
          this.$refs.area.focus();
        });
      }
      this.parentInfo = userInfo;
    },
    //评论框失去焦点隐藏
    hidden() {
      setTimeout(() => {
        this.showInp = false;
      }, 50);
    },
    DialogClose() {
      this.$message.success("登录成功，您可以发布评论了");
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="less" scoped>
.main {
  margin-top: 40px;
  padding-bottom: 25px;
  border-bottom: 2px dashed #ffc671;
  .userInfo {
    margin-left: -47px;
    img {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .info {
      .name {
        font-size: 16px;
      }
      .date {
        margin-top: 9px;
        font-size: 14px;
        color: #999;
      }
    }
  }
  .commentCon {
    padding: 20px;
    color: #333;
    font-size: 20px;
    text-align: justify;
    text-justify: newspaper;
    word-break: break-all;
    .imgs {
      margin-top: 20px;
      .img {
        display: inline;

        img {
          padding: 5px;
          margin: 0 5px;
          border: 1px dashed #ddd;
          width: 80px;
          height: 80px;
        }
      }
    }
  }
  .reply {
    padding-left: 20px;
    color: #868585;
    cursor: pointer;
    span {
      font-weight: 700;
      margin-right: 6px;
    }
  }
}
.writeComment {
  textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 16px;
    margin-top: 30px;
    height: 90px;
    font-size: 13px;
    border-radius: 4px;
    background-color: #fafafa;
    resize: none;
    display: inline-block;
    vertical-align: top;
    outline-style: none;
    border: 1px solid #ccc;
    &:focus {
      border: 1px solid #409eff;
    }
  }
  .btn {
    text-align: right;
    margin-top: 10px;
    button {
      outline: none;
      padding: 7px 15px;
      border: none;
      border-radius: 17px;
      font-size: 18px;
    }
    .ok {
      background-color: coral;
      color: #fff;
    }
    .cencel {
      border: 1px solid #999;
      background-color: #fff;
      color: #999;
    }
  }
}
</style>
